<template>
  <div>
    <!--添加新部门职位-->
    <div>
      <div :style="[{'float': 'left'},{'text-align': 'left'},{'margin-bottom':(isPositionAdd?('0px'):('20px'))}]">
        <h1>宠达总部<br/>部门 / 职位管理</h1>
      </div>
      <div style="margin-bottom: 20px; float: left; margin-left: 25%">
        <el-button round @click="isDepDialog = true" v-if="isPositionAdd">新增部门 / 职位</el-button>
      </div>
    </div>

    <!--表格-->
    <div>
      <el-table
        :data="positionHQInfo"
        style="width: 100%; padding: 20px 50px 20px 50px" height="515px"
        v-loading="loading">
        <el-table-column
          prop="positionId"
          label="ID"
          width="250">
        </el-table-column>
        <el-table-column
          prop="positionName"
          label="部门 / 职位"
          width="250">
        </el-table-column>
        <el-table-column
          prop="positionCreateTime"
          label="创建日期"
          width="250">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" circle size="small" @click="editDialog(scope.row)" v-if="isPositionEdit"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="delDep(scope.row)" v-if="isPositionDel"></el-button>
            <el-button type="danger" round size="small" v-if="!isPositionEdit && !isPositionDel">无权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--添加新部门职位-->
    <el-dialog title="新增部门/职位" :visible.sync="isDepDialog" top="15%" v-if="isPositionAdd">
      <div style="width: 500px; margin-left: 10%; margin-top: -25px; margin-bottom: -20px">
        <el-form label-width="80px" :model="positionHQ">
          <el-form-item label="ID" v-if="positionId">
            <el-input v-model="positionHQ.positionId" readonly></el-input>
          </el-form-item>
          <el-form-item label="部门/职位">
            <el-input v-model="positionHQ.positionName" ></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="positionHQ.positionCreateTime" type="date" style="width: 420px"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitDep('add')" v-if="addFlag">添加</el-button>
            <el-button type="primary" @click="onSubmitDep('edit')" v-if="editFlag">修改</el-button>
            <el-button @click="onSubmitCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    import axios from "axios";

    export default {
      name: "DepIndex",
      mounted() {
        this.getPositionHQ();
      },
      data(){
          return{
            // 权限
            isPositionAdd: false,
            isPositionEdit: false,
            isPositionDel: false,
            // 总部部门/职位
            positionHQInfo: [],

            // 单个部门/职位信息
            positionHQ: {
              positionId: '',
              positionName: '',
              positionCreateTime: ''
            },

            // 弹框
            isDepDialog: false,
            // 弹框中的按钮
            positionId: false,
            addFlag: true,
            editFlag: false,
            // 加载
            loading: true
          }
      },
      methods: {
        // 获取权限
        getPower(){
          this.axios.get('/api/depPower').then((response)=>{
            if(response.data.statusCode == "200"){
              this.isPositionAdd=true;
              this.isPositionEdit=true;
              this.isPositionDel=true
            }else {
              this.isPositionAdd=false;
              this.isPositionEdit=false;
              this.isPositionDel=false
            }
          })
        },

        // 清除信息
        clearPositionHQ(){
          this.positionHQ={
            positionId: '',
              positionName: '',
              positionCreateTime: ''
          }
        },

        // 获取部门所有信息
        getPositionHQ(){
          axios.post("/api/check",{passID: sessionStorage.getItem('passID')}).then((response)=> {
            if (response.data.statusCode == "200") {
              this.isPositionAdd = response.data.data.isPositionAdd; // 添加权限
              this.isPositionEdit = response.data.data.isPositionEdit; // 编辑权限
              this.isPositionDel = response.data.data.isPositionDel; // 删除权限
            }
          });
          this.axios.get('/api/dep').then((response)=>{
            if(response.data.statusCode == "200"){
              this.positionHQInfo = response.data.data;
            }else {
              this.positionHQInfo = [];
            }
            this.loading = false;
            //this.getPower();
          })
        },

        onSubmitDep(attribute) {
          let vPositionName = this.positionHQ.positionName;
          let vPositionCreateTime = this.positionHQ.positionCreateTime;
          var regExp = new RegExp(/^\s*$/);
          var rPositionName = vPositionName.match(regExp);
          if (this.positionHQ.positionName == '' || this.positionHQ.positionCreateTime == ''
            || rPositionName || !this.beforeCurrentTime(vPositionCreateTime)) {
            this.$message({
              message: '请填写正确的信息！',
              center: true,
              type: 'error'
            });
          } else {
            var date = new Date(vPositionCreateTime);
            var createTime = new Date(date.setDate(date.getDate()+1));

            if (attribute == 'add') {
              this.isDepDialog = false;
              this.axios({
                url: '/api/dep',
                method: "post",
                data: JSON.stringify({
                  positionName: vPositionName,
                  positionCreateTime: createTime
                }),
                headers: {
                  'Content-Type': 'application/json; charset=utf-8'
                }
              }).then((response) => {
                if (response.data.statusCode == "200") {
                  this.$message({
                    message: '职位/部门添加成功！',
                    center: true,
                    type: 'success'
                  });
                } else {
                  this.$message({
                    message: '职位/部门添加失败！请稍后重试。',
                    center: true,
                    type: 'error'
                  });
                }
                this.getPositionHQ();
              })
            } else if (attribute == 'edit') {
              this.isDepDialog = false;
              this.axios({
                url: '/api/dep',
                method: "put",
                data: JSON.stringify({
                  positionId: this.positionHQ.positionId,
                  positionName: vPositionName,
                  positionCreateTime: createTime
                }),
                headers: {
                  'Content-Type': 'application/json; charset=utf-8'
                }
              }).then((response) => {
                if (response.data.statusCode == "200") {
                  this.$message({
                    message: '职位/部门修改成功！',
                    center: true,
                    type: 'success'
                  });
                } else {
                  this.$message({
                    message: '职位/部门修改失败！请稍后重试。',
                    center: true,
                    type: 'error'
                  });
                }
                this.getPositionHQ();
              });
              this.clearPositionHQ();
            }
          }
        },

        onSubmitCancel(){
          this.positionId = false;
          this.isDepDialog = false;
          this.addFlag = true;
          this.editFlag = false;
          this.clearPositionHQ();
        },

        // 时间验证
        beforeCurrentTime(value) {// 时间不能大于当前时间
            var myDate = new Date();
            var now = myDate.valueOf();
            var time = new Date(value).valueOf();
            if(now>time){
              return true;
            }else{
              return false;
            }
          },

        // 编辑弹框出现
        editDialog(v){
          this.positionHQ={
            positionId: v.positionId,
            positionName: v.positionName,
            positionCreateTime: v.positionCreateTime
          };
          this.positionId = true;
          this.isDepDialog = true;
          this.addFlag = false;
          this.editFlag = true;
        },

        //删除
        delDep(v){
          this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.delete('/api/dep',{params:{positionId:v.positionId}}).then((response)=>{
              if (response.data.statusCode == "200") {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }else {
                this.$message({
                  type: 'error',
                  message: '删除失败!'
                });
              }
              this.getPositionHQ();
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除!'
            });
          });
        }
      }

    }
</script>

<style scoped>

</style>
